<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>~</title>
    <style>
        * {
            transition: all 0.6s ease-in-out;
            text-shadow: -1px 1px 10px #b46db63b, 1px -1px 10px #a2c9b24b, -0.3px 0.2px 20px #00000034, 0.3px -0.2px 20px #e2e2e210;
            font-family: cursive;
            /* empty-cells: show; */
        }
        
        pre {
            display: inline;
        }
        
        body {
            background-color: #000;
        }
        
        #主盒 {
            border-radius: 50px;
            position: absolute;
            text-align: center;
            right: 5%;
            top: -100%;
            background-color: rgba(30, 30, 30, 0.433);
            color: rgba(240, 240, 240, 0.8);
            font-size: 30px;
            padding: 10px;
            box-shadow: -1px 1px 2px #8c344e85, 1px -1px 2px #ebfa8c33;
        }
        
        #当前时间,
        #抽人 {
            font-size: 60px;
            transition: all 0.2s ease-in-out;
        }
        
        .倒计时 {
            font-size: 72px;
            color: rgba(53, 226, 120, 0.904);
        }
    </style>
    <script>
        目标时间 = "2022/01/14";

        function eid(ele) {
            return document.getElementById(ele);
        }

        function xxh() {
            ssd();
            setTimeout("xxh()", 1000);
        }

        function ssd() {
            var nt = new Date();
            eid("当前时间").innerHTML = 时间补零(nt.getHours()) + " : " + 时间补零(nt.getMinutes()) + " : " + 时间补零(nt.getSeconds());
        }

        function 启动() {
            xxh();
            eid("主盒").style.top = "5%";
            日期();
            目标时间倒计时();
            清空抽人()
        }

        function 清空抽人() {
            eid("抽人").innerHTML = "~";
        }

        时间补零 = (获得数) => Number(获得数) < 10 ? "0" + Number(获得数) : Number(获得数);

        function 目标时间倒计时() {
            var 秒数 = Math.floor(new Date(目标时间).getTime() / 1000) - Math.floor(new Date().getTime() / 1000);
            var 日 = Math.floor(秒数 / 86400);
            if (秒数 >= 0)
                eid("目标时间倒计时").innerHTML =
                "距目标时间:<font style='background-color:rgba(250,250,250,0.91);color:rgb(250,45,45);'>" + 日 + "</font>天";
            else
                eid("目标时间倒计时").innerHTML = "~~目标时间已到~~";
        }

        function 日期() {
            var nt = new Date();
            eid("日期").innerHTML = nt.getFullYear() + "年" + (nt.getMonth() + 1) + "月" + nt.getDate() + "日" +
                "\n<font style = 'font-size:50px;' > 星期 " + ["日", "一", "二",
                    "三", "四", "五", "六"
                ][nt.getDay()] +
                "</font>";
        }

        function 目标时间提示() {
            alert(`以${目标时间}算`);
        }

        function 日期刷新() {
            日期();
            目标时间倒计时();
            //transition: all 0.6s ease-in-out;
            eid('日期').style.transition = 'all 0s ease-in-out';
            eid('日期').style.color = '#5555';
            setTimeout(f => {
                eid('日期').style.transition = 'all 1s ease-in-out';
                eid('日期').style.color = 'rgba(240, 240, 240, 0.8)';
            }, 400);
        }
        // var 全班同学姓名表 = [1];
        // 
        // function 抽人() {
        //     var 项 = Math.floor(Math.random() * 全班同学姓名表.length);
        //     eid("抽人").innerHTML = 全班同学姓名表[项];
        //     抽人动画();
        // }
        // 
        // function 抽人动画() {
        //     eid("抽人").style.boxShadow = '-1px 1px 1px #b46db6b2, 1px -1px 1px #a2c9b2b3';
        //     setTimeout(f => {
        //         eid("抽人").style.boxShadow = '';
        //     }, 600)
        // }
    </script>
</head>

<body onload="启动()">
    <div id="主盒">
        <pre id="当前时间" onclick="//清空抽人()"></pre>
        <div>
            <pre id="日期" onclick="日期刷新();"></pre>
        </div>
        <pre id="目标时间倒计时" class="倒计时" onclick="目标时间提示()"></pre>
        <br />
        <pre id="抽人" onclick="//抽人()"></pre>
    </div>
</body>

</html>